<template>
  <div class="body">
    <div class="header">
      <div class="fy-btn" style="width: 10vw;" @click="goRouter(-1)">返回</div>
      <div style="width: 80vw">大屏编辑页面</div>
      <div class="fy-btn" style="width: 10vw;" @click="goRouter(1)">生成大屏</div>
    </div>
    <div class="container">
      <div class="content fy-flex fy-flex__center fy-flex__column">
        <div class="title">屏幕页面</div>
        <div class="screen">
          <draggable class="nav" v-model="navArray" :options="{group:'nav'}" @onAdd="navDragEnd">
            <div class="sortable__nav sortable__div" :style="{'background-image': `url(${navImageList[item.id]})`}" v-for="(item, index) in navArray" :key="index">
              <div class="del" @click="navArray.splice(index, 1)"></div>
            </div>
          </draggable>
          <draggable class="components" v-model="componentsArray" :options="{group:'components', name: 'aaa'}" @onAdd="componentsDragEnd">
            <div class="sortable__components sortable__div" :style="{'background-image': `url(${componentsImageList[item.id]})`}" v-for="(item, index) in componentsArray" :key="index">
              <div class="del" @click="componentsArray.splice(index, 1)"></div>
            </div>
          </draggable>
        </div>
      </div>
      <div class="sidebar">
        <div class="sidebar-nav">
          <div class="title">组件1</div>
          <draggable class="sortable" v-model="navSortableArray" :options="{group:{ name:'nav',  pull:'clone', put:false }, sort:false}" @clone="clone" :move="getNavData">
            <div class="sortable__div sortable__nav" v-for="(item, index) in navSortableArray" :key="index">{{item.name}}</div>
          </draggable>
        </div>
        <div class="sidebar-content">
          <div class="title">组件2</div>
          <draggable class="sortable" v-model="componentsSortableArray" :move="getComponentsData"
                     :options="{group:{ name:'components',  pull:'clone', put:false }, sort:false}" @clone="clone" @end="endComponentsDrag">
            <div class="sortable__div sortable__components" v-for="(item, index) in componentsSortableArray" :key="index">{{item.name}}</div>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import nav0 from "../assets/editor/nav_0.png";
import nav1 from "../assets/editor/nav_1.png";
import components0 from "../assets/editor/components_0.png";
import components1 from "../assets/editor/components_1.png";
import components2 from "../assets/editor/components_2.png";
import logo from "../assets/screen/bg_a.png";

export default {
  // 全局感知
  name: "editor",

  // 模板依赖
  components: {
    draggable
  },
  filters: {},

  // 接口
  props: {},

  // 本地状态
  data() {
    return {
      navArray: [],
      componentsArray: [],
      navImageList: {
        '0': nav0,
        '1': nav1,
        '-1': logo
      },
      componentsImageList: {
        '2': components0,
        '3': components1,
        '4': components2,
        '-1': logo
      },
      navSortableArray: [
        {
          id: 0,
          name: "nav时间"
        },
        {
          id: 1,
          name: "nav信息"
        },
        {
          id: -1,
          name: "空白"
        }
      ],
      componentsSortableArray: [
        {
          id: 2,
          name: "基础&信息"
        },
        {
          id: 3,
          name: "地图&警报"
        },
        {
          id: 4,
          name: "监控&设备"
        },
        {
          id: -1,
          name: "空白"
        }
      ]
    };
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.initSortable();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {
    initSortable() {},
    getNavData() {
      return this.navArray.length < 2;
    },
    getComponentsData(evt) {
//      console.log(evt.relatedContext.component.options, evt.draggedContext.element.name);
      return this.componentsArray.length < 3;
    },
    navDragEnd() {
      //console.log(this.navArray);
    },
    componentsDragEnd() {
      //console.log(this.componentsArray);
    },
    goRouter(msg) {
      switch (msg) {
        case -1:
          this.$router.go(-1);
          break;
        case 1:
          this.$router.push({
            name: "screen",
            params: {
              navArray: this.navArray,
              componentsArray: this.componentsArray
            }
          });
          break;
        default:
      }
    },
    endComponentsDrag(val) {
      console.log('sddsds', val)
    },
    clone() {
      return true
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .header {
    position: relative;
    width: 100vw;
    height: 6vh;
    background: #051753;
    font-size: 3rem;
    line-height: 6vh;
    color: white;
    text-align: center;
    div {
      float: left;
      height: 6vh;
    }
  }
  .container {
    position: relative;
    width: 100vw;
    height: 94vh;
    .content {
      position: relative;
      float: left;
      width: 80vw;
      height: 94vh;
      .screen {
        position: relative;
        width: 80%;
        height: 80%;
        box-sizing: border-box;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
          0 0 6px 0 rgba(0, 0, 0, 0.04);

        background-image: url(../assets/screen/bg_a.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
        -moz-background-size:100% 100%;
        .nav {
          position: relative;
          width: 100%;
          height: 10%;
        }
        .components {
          position: relative;
          width: 100%;
          height: 90%;
        }
        .del{
          position: absolute;
          right: 0;
          top: 0;
          width: 3rem;
          height: 3rem;
          color: white;
          background: #ff1e37;
          border-radius: 3rem;
          cursor: pointer;
          transform:rotate(45deg);
          &:before{
            content: '+';
            font-size: 3rem;
            line-height: 3rem;
          }
          &:active{
            opacity: .7;
          }
        }
        .sortable__nav {
          float: left;
          position: relative;
          width: 50%;
          height: 100%;
          padding: 2rem;
          color: white;
          border: 0.1rem solid rgba(0, 0, 0, 0.12);
          box-sizing: border-box;

          background-repeat:no-repeat;
          background-size:100% 100%;
          -moz-background-size:100% 100%;
        }
        .sortable__components {
          float: left;
          position: relative;
          width: 33.3333333%;
          height: 100%;
          padding: 2rem;
          color: white;
          border: 0.1rem solid rgba(0, 0, 0, 0.12);
          box-sizing: border-box;

          background-repeat:no-repeat;
          background-size:100% 100%;
          -moz-background-size:100% 100%;
        }
      }
    }
    .sidebar {
      position: relative;
      float: left;
      width: 20vw;
      height: 94vh;
      box-sizing: border-box;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
      .sidebar-nav {
        width: 100%;
        height: 50%;
      }
      .sidebar-content {
        width: 100%;
        height: 50%;
      }
      .sortable {
        position: relative;
        width: 100%;
        height: calc(100% - 5rem);
        overflow-x: hidden;
        overflow-y: auto;
        border-top: 0.1rem solid rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
      }
      .sortable__div {
        float: left;
        width: 100%;
        height: 5rem;
        padding: 1rem;
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
      }
    }
  }
}
.title {
  height: 5rem;
  font-size: 2rem;
  line-height: 5rem;
  color: #051753;
}
</style>
